﻿@page "/components/navmenu"

<DocsPage>
    <DocsPageHeader Title="Navigation Menu" />
    <DocsPageContent>
        <DocsPageSection>
            <SectionHeader Title="Basic Usage">
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true">
                <NavMenuExample />
            </SectionContent>
            <SectionSource Code="NavMenuExample" GitHubFolderName="NavMenu" ShowCode="false" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader Title="Two Way Bind">
                <Description>MudNavGroup allows two-way binding in the <CodeInline>Expanded</CodeInline> property, so you can control what happens when expanded and collapsed.</Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true">
                <NavMenuTwoWayBindableExample />
            </SectionContent>
            <SectionSource Code="NavMenuTwoWayBindableExample" GitHubFolderName="NavMenu" ShowCode="false" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader Title="Sub Groups">
                <Description>NavMenu can have up to <CodeInline>4</CodeInline> sub groups within <CodeInline>MudNavMenu</CodeInline> itself.</Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true">
                <NavMenuSubGroupExample />
            </SectionContent>
            <SectionSource Code="NavMenuSubGroupExample" GitHubFolderName="NavMenu" ShowCode="false" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader Title="Icons">
                <Description>You can use both the icons that come with MudBlazor or font icons. <MudLink Href="/components/icons">Read more about icons here.</MudLink></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true">
                <link href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" rel="stylesheet">
                <NavMenuIconExample />
            </SectionContent>
            <SectionSource Code="NavMenuIconExample" GitHubFolderName="NavMenu" ShowCode="true" />
        </DocsPageSection>
    </DocsPageContent>
</DocsPage>
